<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table id="mytable" border="1">

		</table>
		<script>
			//写JavaScript脚本语言
			//直接写，默认会在页面加载的时候就运行
			/*
				1.用js获取html元素。是通过JavaScript的dom对象document来操作
					document：即表示当前的html页面的对象
					常用方法
					getElementById("元素id")：返回是标签对象
					getElementsByClassName()：ClassName指HTML的class属性，返回的是标签数组
												数组使用[]，可以保存多个数据
					getElementsByName()：Name指的是html的name属性，返回的是标签数组
					getElementsByTagName()：TagName指的是标签名称
					getElementsByTagNameNS()
			*/
			/*
				JS定义变量
					关键字：var和let
					格式：关键字 变量名 [= 初值];
					var和let的区别
						1.let是ES6的标准
						2.let是块级作用域，即作用域只在{}范围内
						3.var作用域是全局的
					使用变量的目的，只有一个为了方便而已
				
		   */
			// console.log(a);
			// let a = 1;
			// console.log(table); //undefined：表示没有被赋值
			let table = document.getElementById("mytable"); //已经表示获取了id为mytable的标签
			// console.log(document.getElementById("mytable"))
			console.log(table);
			//2.加上表头，获使用document创建元素
			let thead = document.createElement("thead");
			//将head标签的引用thead，附加到table中
			table.appendChild(thead);
			let tr = document.createElement("tr");
			thead.appendChild(tr);
			let th = document.createElement("th");
			th.innerText = "姓名";//插入文本
			// th.innerHTML = "<em>姓名</em>";//插件html代码，没有必要，就不要去用
			tr.appendChild(th);
			th = document.createElement("th");
			th.innerText = "语文";//插入文本
			tr.appendChild(th);
			th = document.createElement("th");
			th.innerText = "英语";//插入文本
			tr.appendChild(th);
			th = document.createElement("th");
			th.innerText = "数学";//插入文本
			tr.appendChild(th);
			//3.加上内容
			let tbody = document.createElement("tbody");
			table.appendChild(tbody);
			//小明
			tr = document.createElement("tr");
			tbody.appendChild(tr);
			let td = document.createElement("td");
			td.innerText = "小明";
			tr.appendChild(td);
			td = document.createElement("td");
			td.innerText = "80";
			tr.appendChild(td);
			td = document.createElement("td");
			td.innerText = "80";
			tr.appendChild(td);
			td = document.createElement("td");
			td.innerText = "80";
			tr.appendChild(td);
			//小红
			tr = document.createElement("tr");
			tbody.appendChild(tr);
			td = document.createElement("td");
			td.innerText = "小红";
			tr.appendChild(td);
			td = document.createElement("td");
			td.innerText = "90";
			tr.appendChild(td);
			td = document.createElement("td");
			td.innerText = "90";
			tr.appendChild(td);
			td = document.createElement("td");
			td.innerText = "90";
			tr.appendChild(td);
			//小杰
			tr = document.createElement("tr");
			tbody.appendChild(tr);
			td = document.createElement("td");
			td.innerText = "小杰";
			tr.appendChild(td);
			td = document.createElement("td");
			td.innerText = "100";
			tr.appendChild(td);
			td = document.createElement("td");
			td.innerText = "100";
			tr.appendChild(td);
			td = document.createElement("td");
			td.innerText = "100";
			tr.appendChild(td);
			//平均数
			tr = document.createElement("tr");
			tbody.appendChild(tr);
			td = document.createElement("td");
			td.innerText = "平均";
			tr.appendChild(td);
			td = document.createElement("td");
			td.innerText = "90";
			tr.appendChild(td);
			td = document.createElement("td");
			td.innerText = "90";
			tr.appendChild(td);
			td = document.createElement("td");
			td.innerText = "90";
			tr.appendChild(td);
			//写在函数中，然后通过html标签的事件来触发
		</script>
	</body>
</html>
